<template>
	<view>
		<!-- 搜索栏 -->
		<SearchBar @search="goSearch"></SearchBar>
		<!-- 滚动区域 -->
		<view class="scroll-box">
			<!-- 左 -->
			<scroll-view :style="{ height: wh + 'px' }" class="scroll-item left" scroll-y="true" >
				<view 
					@click="cateChange(item, index)" 
					v-for="(item, index) in cateList"
					:class="[current === index ? 'active' : '']"
					:key="index">{{item.cat_name}}</view>
			</scroll-view>
			<!-- 右 -->
			<scroll-view :scroll-top="scrollTop" :style="{ height: wh + 'px' }" class="scroll-item right" scroll-y="true" >
				<view v-for="(item, index) in cateList2" :key="index">
					<!-- 标题 -->
					<view class="title">/ {{item.cat_name}} /</view>
					<!-- 内容 -->
					<view class="content">
						<navigator 
							class="content-item" 
							v-for="(e, i) in item.children" 
							:key="i"
							:url="`/subpkg/goods-list/goods-list?cid=${e.cat_id}`">
							<!-- 图片 -->
							<image class="content-img" :src="e.cat_icon"></image>
							<!-- 名称 -->
							<text class="content-name">{{e.cat_name}}</text>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 1. 获取数据
	// 2. 渲染ui
	//		scroll-view
	// 3. 添加功能
	//		点击左侧会切换右侧内容
	//			点击对应分类时会给当前分类添加active样式
	//				把当前点击项的index保存，在v-for做判断，判断当前循环index和我点击的index是否相同，如果相同就添加active样式
	//			点击之后右侧内容会更换
	//				点击后把cateList2数组重新赋值为点击对象的children
	//		点击右侧会跳转到对应的商品列表页面
	
	// 其它：编辑模式 - 可以在项目刷新时直接打开我们正在开发的页面
	//		0. 先跳转到要开发的页面
	//		1. 点击微信开发者工具最上方普通编译
	//		2. 点击添加编译模式
	// 		3. 看一下编译名称和路径是否为你想要的页面
	//		4. 点击确定
  import TabBarM from '@/mixins/tabbar-badge.js'
	export default {
    mixins:[TabBarM],
		data() {
			return {
				cateList: [],
				cateList2: [],
				wh: 0,
				current: 0,
				scrollTop: 0
			};
		},
		onLoad() {
			this.getCate()
			//获取窗口高度
			const { windowHeight } = uni.getSystemInfoSync()
			this.wh = windowHeight - 50
		},
		methods: {
			//跳转到搜索页面
			goSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			//切换分类
			cateChange(item, index) {
				this.current = index
				this.cateList2 = item.children
				//恢复右侧scroll-view滚动高度
				this.scrollTop = this.scrollTop === 0 ? .1 : 0
			},
			//获取分类数据
			async getCate() {
				const { data: { message, meta } } = await uni.$http.get('/api/public/v1/categories')
				if(meta.status !== 200) return uni.$showMsg()
				this.cateList = message
				this.cateList2 = message[0].children
			}
		}
	}
</script>

<style lang="scss">
	.scroll-box {
		display: flex;
		
		.left {
			flex: 0 0 90px;
			
			.active {
				position: relative;
				background-color: #fff;
				
				&::before {
					content: '';
					width: 3px;
					height: 30px;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -15px;
					background-color: #c00000;
				}
			}
			
			view {
				font-size: 12px;
				text-align: center;
				line-height: 60px;
				background-color: #f7f7f7;
			}
		}
		
		.right {
			flex: 1;
			
			.title {
				text-align: center;
				font-size: 12px;
				font-weight: bold;
				margin: 4px 0;
			}
			
			.content {
				display: flex;
				flex-wrap: wrap;
				
				.content-item {
					width: 33.33%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 6px;
					
					.content-img {
						width: 60px;
						height: 60px;
						margin-bottom: 6px;
					}
					
					.content-name {
						font-size: 12px;
					}
				}
			}
		}
		.scroll-item {
			height: 300px;
		}
	}
</style>
